<template>
    <div>
        <div class="nav-box">
            <div class="nav">
                <router-link to="/">
                    <div class="logo_box">
                        <img src="../../assets/logob.png">
                    </div>
                </router-link>
                <div class="menu">
                    <el-menu router :default-active="$route.path" class="el-menu-demo xg-bac" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="/product">产品</el-menu-item>
                        <el-menu-item index="/list">案例</el-menu-item>
                        <el-menu-item index="/company">公司</el-menu-item>
                        <el-menu-item index="/service">服务</el-menu-item>
                    </el-menu>
                </div>
            </div>
        </div>
        <div class="nav-box hidden" v-bind:class="{ display: isDisplay }">
            <div class="nav">
                <div class="logo_box">
                    <img src="../../assets/logo.png">
                </div>
                <div class="menu">
                    <el-menu router :default-active="$route.path" class="el-menu-demo xg-bac" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="/product" style="color: #333;">产品</el-menu-item>
                        <el-menu-item index="/list" style="color: #333;">案例</el-menu-item>
                        <el-menu-item index="/company" style="color: #333;">公司</el-menu-item>
                        <el-menu-item index="/service" style="color: #333;">服务</el-menu-item>
                    </el-menu>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                lists:[ ],
                activeIndex: '1',
                isDisplay: false
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleScroll(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>70){
                    this.isDisplay=true;
                }else{
                    this.isDisplay=false;
                }
            },
        },
        mounted(){
            window.addEventListener('scroll',this.handleScroll);
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }

    .main_container{
        width:100%;
    }
    .nav-box{
        width:100%;
        position: absolute;
        top:0;
        left:0;
        z-index:1000;
        overflow: hidden;
    }
    .nav{
        width: 1000px;
        margin:0 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .hidden{
        display: none;
    }
    .display{
        display: block;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
    }

    .xg-bac{
        background: none;
    }
    .logo_box{
        float: left;
    }
    .logo_box img{
        width: 120px;
    }
    .menu{
        float:right;
    }
    .banner-box{
        width: 100%;
        margin:0 auto;
    }
    .banner-img{
        width: 100%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

</style>
